<style lang="less">
    @import 'own.less';
</style>

<template>
    <div>
        <Card>
            <p slot="title">
                <Icon type="person"></Icon>
                修改密码
            </p>
            <div>
                <Form ref="userForm" :model="userForm" :rules="infoValidate" :label-width="100" label-position="right">
                    <FormItem label="用户账号：">
                        <span>{{userInfo.username}}</span>
                    </FormItem>
                    <FormItem label="所属公司：">
                        <span>{{userInfo.company}}</span>
                    </FormItem>
                    <FormItem label="所属部门：">
                        <span>{{userInfo.dept}}</span>
                    </FormItem>
                    <FormItem label="原密码：" prop="oldPwd">
                        <Input v-model="userForm.oldPwd" type="password" placeholder="请输入现在使用的密码" style="width: 200px;" ></Input>
                    </FormItem>
                    <FormItem label="新密码：" prop="newPwd">
                        <Input v-model="userForm.newPwd" type="password" placeholder="请输入新密码，至少6位字符" style="width: 200px;"></Input>
                    </FormItem>
                    <FormItem label="确认新密码：" prop="reNewPwd">
                        <Input v-model="reNewPwd" type="password" placeholder="请再次输入新密码" style="width: 200px;"></Input>
                    </FormItem>
                    <div>
                        <Button type="text" style="width: 100px;" @click="handleCancle('userForm')">取消</Button>
                        <Button type="primary" style="width: 100px;" @click="handleUpdate('userForm')">修改</Button>
                    </div>
                </Form>
            </div>
        </Card>
    </div>
</template>

<script>
import { fetchGetData,fetchPostData,adminUrl } from '@/libs/fetch.js';
import util from '@/libs/util.js';
import qs from 'qs';
export default {
    name: 'own_index',
    data () {
          const repasswordValidator=(rule,value,callback)=>{
            if(this.reNewPwd===''){
              callback(new Error('确认密码不能为空'));
            }else if(this.reNewPwd!=this.userForm.newPwd){
              callback(new Error('二次输入的密码不一致'));
            }else {
              callback();
            }
          }
        return {
            userInfo:{},
            userForm: {
                oldPwd: '',
                newPwd: ''
            },
            reNewPwd:'',
            infoValidate: {
              oldPwd: [
                { required: true, message: '原密码不能为空', trigger: 'blur'},
              ],
              newPwd: [
                { required: true, message: '密码不能为空', trigger: 'blur'},
                { type: 'string', min: 6, message: '密码长度最少为6位', trigger: 'blur' }
              ],
              reNewPwd:[
                { required: true,validator:repasswordValidator, trigger: 'blur'}
              ]
            }
        };
    },
    methods: {
      handleUpdate(name){
        this.$refs[name].validate((valid) => {
          if (valid) {
              fetchPostData(adminUrl+'/admin/user/updatePwd',qs.stringify(this.userForm))
                .then(data=>{
                  if(data.status==1){
                    let _that=this;
                    this.$Notice.success({
                      title: data.message,
                      duration:2,
                      onClose:function () {
                        util.loginOut();
                        _that.$store.commit('logout', _that);
                        _that.$store.commit('clearOpenedSubmenu');
                        _that.$router.push({name: 'login'});
                      }
                    })
                  }else{
                    this.$Notice.error({
                      title: '修改失败',
                      desc: data.message,
                      duration:0
                    });
                  }
                })

          } else {
            this.$Message.error('信息输入有误!');
          }
        })
      },
      handleCancle(name){
        this.$refs[name].resetFields();
      }
    },
    mounted () {
      fetchGetData(adminUrl+'/admin/user/center',{})
        .then(data=>{
          if(data.status==1){
            this.userInfo=data.data;
          }else{
            this.$Message.error(data.message);
          }
        })
    }
};
</script>
